import React from 'react';
import moment from 'moment';
import api from 'js/api/index';
import { List, Toast } from 'antd-mobile';
import InfiniteScroll from 'react-infinite-scroller';
import { SelectDate, SelectDateComponent } from 'views/component/selectDate/selectDate';
import SelectTitle from 'views/component/selectTitle/selectTitle';
import { SubViewLink } from 'views/component/subViewLink/subViewLink';
import { hashHistory } from 'react-router';
import TableBox from 'views/component/table/table';
import { i18n } from 'js/core/i18n';
import './monitoring.scss';

let pagesize = 10;

class Main extends React.Component {
  constructor() {
    super()
    this.query = {
      ShopId: '',
    }
    this.state = {
      shop: null,
      data: [],
      list: null
    }
  }
  componentDidMount = () => {
    this.ShopList();
  }
  ShopList = () => {
    api('/BaseSet/ShopList').then(data => {
      this.query.ShopId = data.data[0].ShopId;
      this.setState({ shop: data.data[0] })
      this.getData();
    });
  }
  shopNameOnChange = (shopInfo) => {
    this.query.ShopId = shopInfo.ShopId;
    this.setState({ shop: shopInfo })
    this.getData();
  }
  getData = () => {
    api('/Device/GiveUDeviceInfo', this.query).then((data) => {
      let list = data.result.map(item => {
        return {
          SNo: item.SNo,
          ShopId: item.ShopId,
          iChNo: item.iChNo,
        }
      })
      this.setState({ data: data.result, list: list })
    });
  }
  dateOnChange = (value) => {
    this.query.start = value[0];
    this.query.end = value[1];
    this.setState({ start: value[0], end: value[1], data: [], hasMore: true })
  }
  look = (data, item) => {
    data = [{ "SHOPID": "1030210001", "SHOPNAME": "Shanghai 02 Mall", "MEDIATYPENAME": "ç›‘æŽ§", "SERVER": "app.umeye.cn", "PORT": "8300", "DEVID": "xmks9iph289u", "USERNAME": "admin", "PASSWORD": "pagoda2016", "DEVNAME": "test5", "DEVCH": "0", "PLAYTYPE": "1", "ORDER": "5" },
    { "SHOPID": "1030210001", "SHOPNAME": "Shanghai 02 Mall", "MEDIATYPENAME": "å®¢æµ", "SERVER": "app.umeye.cn", "PORT": "8300", "DEVID": "xmkst9ryrhhx", "USERNAME": "admin", "PASSWORD": "pagoda-cd", "DEVNAME": "test3", "DEVCH": "1", "PLAYTYPE": "1", "ORDER": "2" },
    {
      "SHOPID": "1030210001", "SHOPNAME": "Shanghai 02 Mall", "MEDIATYPENAME": "å®¢æµ", "SERVER": "app.umeye.cn", "PORT": "8300",
      "DEVID": "xmks9iph289u", "USERNAME": "admin", "PASSWORD": "pagoda2016", "DEVNAME": "test4", "DEVCH": "1", "PLAYTYPE": "1", "ORDER": "4"
    }]

    data = [{ "SHOPID": "1030210001", "SHOPNAME": "Shanghai 02 Mall", "MEDIATYPENAME": "ç›‘æŽ§", "SERVER": "app.umeye.cn", "PORT": "8300", "DEVID": "xmks9iph289u", "USERNAME": "admin", "PASSWORD": "pagoda2016", "DEVNAME": "test5", "DEVCH": "0", "PLAYTYPE": "1", "ORDER": "5" }];
    let d = [];
    d = [{
      SHOPID: item.ShopId + '', SHOPNAME: item.ShopName, SERVER: 'app.umeye.cn', PORT: '8300', USERNAME: 'admin', PASSWORD: '', DEVID: item.devid, DEVNAME: '实时视频', DEVCH: item.iChNo + "", PLAYTYPE: 1 + "", ORDER: 0 + ""
    }];
    var isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if (isiOS) {
      Cordova.exec(function (winParam) { }, function (error) { }, "VideoPlugin", "show", data);
    } else {
      window.fwJs.test(JSON.stringify({
        result: data
      }));
    }
  }
  MonitoringCapture = () => {
    api('/Monitoring/MonitoringCapture', {
      ShopId: this.state.shop.ShopId,
      list: this.state.list,
    }, 'POST').then((data) => {
      Toast.success(i18n.get('新建成功'), 2);
      if (this.props.complete) {
        this.props.complete();
        FW.emit('back');
      }
    })
  }
  complete = () => {
    if (this.props.complete) {
      this.props.complete();
      setTimeout(() => {
        FW.emit('back');
      }, 550)
      
    }
  }
  render() {
    let { data, shop, list } = this.state;
    return <div id="monitoring" className="flex-col">
      <div className="device-container">
        <List className="picker-list mb20">
          <div className="deviceItem device-border flex-vcenter">
            <SelectTitle classStyle="name">{i18n.get('选择店铺')}</SelectTitle>
            <SubViewLink moduleName="shopSearch" className="flex-g-1 text-right deviceItemContent" title={i18n.get('选择店铺')} modelData={{ onChange: this.shopNameOnChange }}>
              {shop ? shop.ShopName : <div style={{ color: '#909090' }}>{i18n.get('选择店铺')}</div>}
            </SubViewLink>
          </div>
        </List>
      </div>
      <div className="flex-g-1 scroll-absolute">
        <div>
          <TableBox heads={[i18n.get('门店名称'), i18n.get('设备状态'), i18n.get('位置'), i18n.get('操作')]} >
            {data.map((item, index) => (
              <tr key={item.devid}>
                <td>{item.ShopName}</td>
                <td>{item.DeviceStatus}</td>
                <td>{item.DevicePosition}</td>
                <td onClick={() => { this.look(data, item) }}>{i18n.get("查看实时视频")}</td>
              </tr>
            ))}
          </TableBox>
        </div>
      </div>
      <div className="device-btn">
        <button type="button" className="btn btn-primary" onClick={this.MonitoringCapture}>{i18n.get("确认新建")}</button>
      </div>
      <SubViewLink className="device-btn" moduleName="monitoringMatch" title={i18n.get("评分")} modelData={{ id: shop ? shop.ShopId : 0, list: list, complete: this.complete }}>
        <button type="button" className="btn btn-primary">{i18n.get("评分")}</button>
      </SubViewLink>
    </div>
  }
}

export default Main;